<template>
    <view class="wrapper">
        <view class="title">1. 基础用法 (不可选中)</view>
        <view class="box">
            <text>这是一段普通的文本，你无法长按选中它。</text>
        </view>

        <view class="title">2. 允许长按选中 (selectable="true")</view>
        <view class="box">
            <text selectable="true">这是一段可选择的文本，请尝试长按来复制它。</text>
        </view>
        
        <view class="title">3. 嵌套实现局部样式</view>
        <view class="box">
            <text>
                这是一句话，但
                <text class="highlight">高亮部分</text>
                的样式不一样，
                <text class="bold-text">这里还加粗了</text>
                。
            </text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.box {
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
}
/* 嵌套样式 */
.highlight {
    color: #dd524d;
    background-color: #f0f0f0;
    padding: 2px 4px;
}
.bold-text {
    font-weight: bold;
    font-size: 18px;
}
</style>